<template>
  <view class="pages">
    <view class="swiper">
      <swiper class="swiper-main" autoplay :interval="10000" :duration="200" circular
        @change="({ detail: { current } }) => (swiperNum = current)">
        <swiper-item class="swiper-main-item" v-for="item of banners" :key="item.id">
          <image class="img" :src="item.image" mode="aspectFill" />
        </swiper-item>
      </swiper>
      <view class="swiper-dots">
        <view class="swiper-dots-item" :class="{ active: num === swiperNum }" v-for="num of banners.length" :key="num">
        </view>
      </view>
    </view>
    <view class="order-statistics w100" @click="$to('/pages/order/index')">
      <view class="title">订单统计</view>
      <view class="box">
        <view class="item">
          <text class="label">全部订单</text>
          <text class="value">{{orderStatisticsData.count}}</text>
        </view>
        <view class="item">
          <text class="label">已完成</text>
          <text class="value">{{orderStatisticsData.ywc_count}}</text>
        </view>
        <view class="item">
          <text class="label">待出价</text>
          <text class="value">{{orderStatisticsData.dcj_count}}</text>
        </view>
        <view class="item">
          <text class="label">待确认</text>
          <text class="value">{{orderStatisticsData.dqr_count}}</text>
        </view>
        <view class="item">
          <text class="label">待上门</text>
          <text class="value">{{orderStatisticsData.dsm_count}}</text>
        </view>
        <view class="item">
          <text class="label">待打款</text>
          <text class="value">{{orderStatisticsData.ddk_count}}</text>
        </view>
        <view class="item">
          <text class="label">已打款</text>
          <text class="value">{{orderStatisticsData.ydk_count}}</text>
        </view>
        <view class="item">
          <text class="label">已取消</text>
          <text class="value">{{orderStatisticsData.yqx_count}}</text>
        </view>
      </view>
    </view>
    <view class="my-order w100">
      <view class="my-order-title">
        我的订单
      </view>
      <view class="my-order-list">
        <u-empty v-if="orderList.length===0" text="暂无订单" mode="history"></u-empty>
        <view class="item" v-for="item in orderList">
          <view class="tit">
            <image src="/static/home/icon-order-mobile.png"></image>
            <view class="text">手机订单</view>
            <view class="status" :class="'status' + item.status">{{statusParm(item.status)}}</view>
          </view>
          <view class="box">
            <view class="text">
              <text>回收金额：</text>
              <text class="price">{{item.expect_price || '？？？？'}}元</text>
            </view>
            <view class="text">
              <text>手机型号：</text>
              <text>{{item.product_name}}</text>
            </view>
            <view class="text">
              <text>颜色：</text>
              <text>{{item.colour}}</text>
            </view>
            <view class="text">
              <text>内存：</text>
              <text>{{item.memory}}</text>
            </view>
            <view class="text" v-if="item.imei!=''">
              <text>序列号：</text>
              <text>{{item.imei}}</text>
            </view>
          </view>
          <view class="operate">
            <text class="time">{{item.createtime_text}}</text>
            <view class="r">
              <button class="detail" @click="$to('/pages/order/detail',{id:item.id})">详情</button>
              <button v-if="item.status == 1" class="confirm" @click="$to('/pages/order/detail',{id:item.id})">信息确认</button>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        swiperNum: 0,
        banners: [{
          name: 'banner图1',
          img: require("@/static/home/banner.png"),
        }],
        orderStatisticsData: {},
        orderList: [],
        query: {
          page: 1,
          pageSize: 10,
        },
        loadMore: '',
      }
    },
    onPullDownRefresh() {
      this.getOrderStatistics()
      this.refresh()
    },
    onReachBottom() {
      this.query.page++
      this.getOrder()
    },
    onShow() {
      this.getBanner()
      this.getOrderStatistics()
      this.refresh()
      //  uni.removeStorageSync('token')
    },
    methods: {
      async getBanner() {
        const res = await this.$http('/index/banner')
        this.banners = res.list
      },
      async getOrderStatistics() {
        const res = await this.$http('/order/tongji')
        this.orderStatisticsData = res
      },
      async getOrder() {
        if (this.loadMore == 'nomore') return
        const res = await this.$http('/order/index', this.query)
        uni.stopPullDownRefresh()
        if (res.list.length <= this.query.pageSize) this.orderList = this.orderList.concat(res.list)
        if (res.list.length < this.query.pageSize) this.loadMore = 'nomore'
      },
      refresh() {
        this.loadMore = 'refresh'
        this.query.page = 1
        this.orderList = []
        this.getOrder()
      },
      // 解析订单状态
      statusParm(status){
        const statusList = [
          {id:-1,label:"已取消"},
          {id:0,label:"待出价"},
          {id:1,label:"待确认"},
          {id:2,label:"待上门"},
          {id:3,label:"待打款"},
          {id:4,label:"已打款"},
          {id:5,label:"待最终报价"},
          {id:6,label:"已完成"}
        ]
        return statusList[statusList.findIndex(item=>item.id == status)].label
      },
    }
  }
</script>

<style lang="scss" scoped>
  .pages {
    padding: 16rpx 16rpx 0;
  }

  // banner图
  .swiper {
    position: relative;
    width: 100%;
    height: 300rpx;
  }

  .swiper-main {
    height: 100%;
    border-radius: 16rpx;
    overflow: hidden;
  }

  .swiper-main-item {
    .img {
      width: 100%;
      height: 100%;
    }
  }

  .swiper-dots {
    position: absolute;
    left: 50%;
    bottom: 20rpx;
    transform: translateX(-50%);
    display: flex;

    .active {
      opacity: 1;
      width: 32rpx;
    }
  }

  .swiper-dots-item {
    width: 12rpx;
    height: 12rpx;
    border-radius: 6rpx;
    background-color: #fff;
    opacity: 0.4;
    transition: all 0.2s linear;

    &:nth-child(n + 2) {
      margin-left: 12rpx;
    }
  }

  .order-statistics {
    margin-top: 16rpx;
    background-color: #fff;
    border-radius: 16rpx;
    overflow: hidden;

    .title {
      height: 88rpx;
      line-height: 88rpx;
      padding: 0 42rpx;
      background-color: #1890ff;
      color: #fff;
      font-size: 30rpx;
    }

    .box {
      padding: 23rpx 0;
      display: flex;
      align-items: center;
      flex-wrap: wrap;

      .item {
        width: 25%;

        text {
          display: block;
          text-align: center;
        }

        .label {
          font-size: 28rpx;
          color: #2c2a23;
        }

        .value {
          font-size: 32rpx;
          font-weight: 700;
          color: #000018;
          padding: 30rpx 0;

          &.red {
            color: #ff2234;
          }

          &.green {
            color: #089a04;
          }
        }
      }
    }
  }

  .my-order {}

  .my-order-title {
    height: 85rpx;
    line-height: 85rpx;
    padding-left: 51rpx;
    position: relative;
    color: #3a4753;
    font-size: 32rpx;
    font-weight: 700;

    &::before {
      position: absolute;
      top: 24rpx;
      left: 19rpx;
      content: '';
      width: 8rpx;
      border-radius: 8rpx;
      height: 38rpx;
      background-color: #1890ff;
    }
  }

  .my-order-list {
    .item {
      background-color: #fff;
      border-radius: 16rpx;
      overflow: hidden;
      margin-bottom: 16rpx;
      .tit {
        height: 88rpx;
        line-height: 88rpx;
        padding: 0 30rpx;
        background-color: #edf3fa;
        color: #030100;
        font-size: 28rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;

        image {
          width: 33rpx;
          height: 33rpx;
        }

        .text {
          width: 330rpx;
        }

        .status {
          width: 280rpx;
          font-size: 28rpx;
          text-align: right;
        }
        .status-1{
          color:#909399;
        }
        .status0{
          color:#fa3534;
        }
        .status1{
          color:#fa3534;
        }
        .status2{
          color:#fa3534;
        }
        .status3{
          color:#fa3534;
        }
        .status4{
          color:#fa3534;
        }
        .status5{
          color:#fa3534;
        }
        .status6{
          color:#19be6b;
        }
      }

      .box {
        padding: 20rpx 38rpx 0;

        .text {
          line-height: 56rpx;
          display: flex;
          align-items: center;
          color: #1d1715;
          font-size: 28rpx;

          text:first-child {
            width: 154rpx;
            color: #ccc;
          }
          .price{
            font-weight: 700;
            color: #fa3534;
          }
        }
      }

      .operate {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 24rpx 24rpx 28rpx 38rpx;
        .time {
          color: #999;
          font-size: 26rpx;
        }

        .r {
          display: flex;
          align-items: center;
          justify-content: end;
          .detail{
            padding:19rpx 23rpx;
            border-radius: 60rpx;
            background-color: #ecf6ff;
            color:#1890ff;
            font-size: 24rpx;

          }
          .confirm{
            margin-left: 14rpx;
            padding:19rpx 23rpx;
            border-radius: 60rpx;
            background-color: #1890ff;
            color:#fff;
            font-size: 24rpx;
          }
        }
      }
    }
  }
</style>
